import IntegrationTable, {
	IntegrationTableProps,
} from "@/components/IntegrationTable";
import type { ProColumns, ActionType } from "@ant-design/pro-table";
import React, { useEffect, useRef, useState } from "react";
import {
	Image,
	Radio,
	Select,
	message,
	Card,
	Tabs,
	DatePicker,
	Descriptions,
} from "antd";
import { DynamicFormItem } from "@/components/DynamicForm";
import { getPromoter } from "./service";
import { arrayToObject, getArray, getString, getObject } from "phinney-toolkit";
import axios from "axios";
import ReactEcharts from "echarts-for-react";
import moment from "moment";
const { RangePicker } = DatePicker;

// @page 商家
const Business: React.FC<any> = () => {
	// 组件是否已经卸载
	let isUnMounted = false;
	const actionRef = useRef<ActionType>();
	const [chartsData, setChartsData] = useState<any>({});
	const [timeData, setTimeData] = useState<any>([]);

	const getPromoterCharts = async (beginTime?: any, endTime?: any) => {
		const res = await getPromoter({
			endTime: timeData[1],
			beginTime: timeData[0],
		});
		setChartsData({
			xAxisData: res.data.arrTime,
			seriesData: res.data.arrNum,
		});
	};
	const getOption = () => {
		var option = {
			tooltip: {
				trigger: "axis",
				formatter: function (datas: any) {
					var res = datas[0].axisValue + "<br/>";
					for (var i = 0, length = datas.length; i < length; i++) {
						res += "推广人数:" + datas[0].value + "人" + "<br/>";
					}
					return res;
				},
			},
			xAxis: {
				type: "category",
				axisTick: { show: false },
				data: chartsData.xAxisData,
			},
			yAxis: {
				type: "value",
			},
			series: [
				{
					data: chartsData.seriesData,
					type: "line",
				},
			],
		};
		return option;
	};

	// 表格项
	const columns: ProColumns[] = [
		{
			title: "时间",
			dataIndex: "time",
			search: false,
			width: 200,
		},
		{
			title: "数量",
			dataIndex: "num",
			search: false,
		},
	];

	const getFormItems = (vm: any, isEdit?: boolean): DynamicFormItem[] => {
		const { coupon } = vm.state;
		return [
			...(vm.state.isTrue
				? [
						{
							type: "textarea",
							label: "拒绝理由",
							name: "rejectReason",
							required: true,
						},
				  ]
				: []),
		];
	};

	const changeValue = (data: any) => {
		setTimeData(data);
		actionRef.current?.reload();
	};
	// 一体化表格props
	const tablePorps: IntegrationTableProps = {
		rowKey: "articleId",
		scroll: { x: 1000 },
		actionRef,
		columns,
		search: false,
		listProps: {
			url: "/promoter/promoter-static-list",
			method: "GET",
			requestType: "params",
			paramsHandle: (params: any) => {
				return {
					...params,
					endTime: timeData[1],
					beginTime: timeData[0],
				};
			},
		},
		handleOperating: (items: any[]) => [
			{
				type: "modal",
				props: {
					btnText: "详情",
					modalProps: {
						width: 1200,
						footer: false,
						title: "详情",
						content: {
							render: (vm: any, getModalRef: any, from: any) => {
								let result = vm.state.record;
								console.log(result);
								return (
									<div>
										{result.item.map((item: any) => {
											return (
												<Descriptions
													style={{ marginBottom: 20 }}
													title={item.name}
													layout="vertical"
													bordered
												>
													<Descriptions.Item label="手机号">
														{item.phone}
													</Descriptions.Item>
													<Descriptions.Item label="数量">
														{item.num}
													</Descriptions.Item>
													<Descriptions.Item label="时间">
														{item.time}
													</Descriptions.Item>
												</Descriptions>
											);
										})}
									</div>
								);
							},
						},
					},
				},
			},
			...items,
		],
		tableBefore: () => {
			return (
				<div>
					<Card>
						<Card>
							<span>推广时间：</span>
							<RangePicker
								picker="week"
								format="YYYY-MM-DD"
								disabledDate={(current: any) => {
									return current && current >= moment().endOf("day");
								}}
								onChange={(date: any, dateString: any) => {
									setTimeout(() => {
										changeValue(dateString);
									}, 0);
								}}
							/>
						</Card>
						<ReactEcharts
							style={{ height: "500" + "px" }}
							notMerge={true}
							lazyUpdate={true}
							theme={"theme_name"}
							option={getOption()}
						/>
					</Card>
				</div>
			);
		},
	};

	// 初始化加载数据
	useEffect(() => {
		if (timeData.endTime != undefined) {
			getPromoterCharts(timeData.beginTime, timeData.endTime);
		} else {
			getPromoterCharts();
		}

		return () => {
			isUnMounted = true;
		};
	}, [timeData]);

	return <IntegrationTable {...tablePorps} />;
};

export default Business;
